import 'package:bxultimate/widgets/mk_page.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:quill_html_editor/quill_html_editor.dart';

import 'controller.dart';

class MerchantEnterAnnexPage extends StatefulWidget {
  const MerchantEnterAnnexPage({Key? key}) : super(key: key);

  @override
  State<MerchantEnterAnnexPage> createState() => _MerchantEnterAnnexPageState();
}

class _MerchantEnterAnnexPageState extends State<MerchantEnterAnnexPage> {
  final controller = Get.find<MerchantEnterAnnexController>();
  final state = Get.find<MerchantEnterAnnexController>().state;
  QuillEditorController editorController = QuillEditorController();

  final _toolbarColor = Colors.grey.shade200;
  final _backgroundColor = Colors.white70;
  final _toolbarIconColor = Colors.black87;
  final _editorTextStyle = const TextStyle(
      fontSize: 18,
      color: Colors.black,
      fontWeight: FontWeight.normal,
      fontFamily: 'Roboto');
  final _hintTextStyle = const TextStyle(
      fontSize: 18, color: Colors.black38, fontWeight: FontWeight.normal);


  @override
  Widget build(BuildContext context) {
    return MkPage(
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          title: Text('附件'),
          actions: [
            IconButton(
              icon: const Icon(Icons.check),
              onPressed: controller.save,
            )
          ],
        ),
        body: Column(
          children: [
            ToolBar(
              toolBarColor: _toolbarColor,
              padding: const EdgeInsets.all(8),
              iconSize: 16,
              iconColor: _toolbarIconColor,
              activeIconColor: Colors.greenAccent.shade400,
              controller: editorController,
              crossAxisAlignment: WrapCrossAlignment.start,
              direction: Axis.horizontal,
            ),
            Expanded(
              child: Obx(()=>QuillHtmlEditor(
                text: "${state.shop.shopDetails}",
                hintText: 'Hint text goes here',
                controller: editorController,
                isEnabled: true,
                ensureVisible: false,
                minHeight: 500,
                autoFocus: false,
                textStyle: _editorTextStyle,
                hintTextStyle: _hintTextStyle,
                hintTextAlign: TextAlign.start,
                padding: const EdgeInsets.only(left: 10, top: 10),
                hintTextPadding: const EdgeInsets.only(left: 20),
                backgroundColor: _backgroundColor,
                inputAction: InputAction.newline,
                onEditingComplete: (s) => debugPrint('Editing completed $s'),
                loadingBuilder: (context) {
                  return const Center(
                      child: CircularProgressIndicator(
                        strokeWidth: 1,
                        color: Colors.red,
                      ));
                },
                onTextChanged: controller.onTextChanged,
                onEditorCreated: () {
                  debugPrint('Editor has been loaded');
                },
                onEditorResized: (height) =>
                    debugPrint('Editor resized $height'),
                onSelectionChanged: (sel) =>
                    debugPrint('index ${sel.index}, range ${sel.length}'),
              )),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    Get.delete<MerchantEnterAnnexController>();
    super.dispose();
  }
}
